<template>
  <div class="mk-index">
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in bannerLists" :key="index">
          <img :src="item.banner_pic" alt>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="show">
      <p>产品展示</p>
      <span>全方位净化每立方米空间</span>
    </div>
    <div class="products">
      <div class="products-box" @mouseover="mouseover" ref="mouseEvent">
        <div
          class="item"
          v-for="(item,index) in recommend"
          @click="goDetails(item.id)"
          :key="index"
        >
          <div class="img">
            <img :src="item.product_pic" alt>
            <span>推
              <br>荐
            </span>
          </div>
          <div class="title">{{item.product_name}}</div>
          <div class="btn">查看详情</div>
        </div>
      </div>
    </div>
    <div class="process">
      <p>施工流程</p>
      <div class="img-all">
        <img src="../assets/pro1.png" alt>
        <img src="../assets/pro2.png" alt>
        <img src="../assets/pro3.png" alt>
        <img src="../assets/pro4.png" alt>
        <img src="../assets/pro5.png" alt>
      </div>
    </div>
    <div class="show">
      <p>案例展示</p>
      <span>全方位净化每立方米空间</span>
    </div>
    <div class="cases">
      <div class="cases-box">
        <div class="cases-top">
          <div class="top-left" v-for="(item) in indexCasesTop[0]">
            <div class="up">
              <img :src="'https://cdn1-open.mokyun.com/'+item.case_pic" alt>
            </div>
            <div class="end">
              <span>{{item.case_name}}</span>
              <span @click="goCaseDetails(item.id)">查看详情→</span>
            </div>
          </div>
          <!-- <div class="top-left">
            <div class="up">
              <img src="../assets/s2.png" alt>
            </div>
            <div class="end">
              <span>4S店除甲醛</span>
              <span>查看详情→</span>
            </div>
          </div>-->
        </div>
        <div class="cases-bottom">
          <div class="item" v-for="(item) in indexCasesBottom[0]">
            <div class="img">
              <img :src="'https://cdn1-open.mokyun.com/'+item.case_pic" alt>
            </div>
            <div class="text">
              <span>{{item.case_name}}</span>
              <span @click="goCaseDetails(item.id)">查看详情→</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="level">
      <img src="../assets/level.png" alt>
    </div>
    <div class="figure">
      <img src="../assets/figure.png" alt>
    </div>
    <div class="knowledge">
      <div class="title">
        <p>环保知识</p>
        <span>全方位净化每立方米空间</span>
      </div>
      <div class="knowledge-box">
        <div class="item" v-for="(item) in casesLists">
          <div class="bg-title">
            <!-- <h3>行业资讯</h3> -->
            <span>01</span>
          </div>
          <ul class="content">
            <li v-for="(i) in item[0]">
              <a href="javascript:;" @click="goKnowledgeDetails(i.id)">{{i.knowledge_name}}</a>
            </li>
          </ul>
          <div class="more" @click="goKnowledge">
            <img src="../assets/more.png" alt>
          </div>
        </div>
      </div>
    </div>
    <div class="about">
      <div class="about-box">
        <div class="item">
          <h3>ABOUT</h3>
          <h4>公司简介</h4>
        </div>
        <div class="item">
          <h4>发展历程（HISTORY）</h4>
          <p>{{indexAbout.desc}}</p>
          <div class="more" @click="$router.push('/company')">
            <img src="../assets/right.png" alt>
          </div>
        </div>
        <div class="item">
          <img :src="indexAboutPic" alt>
        </div>
        <div class="item">
          <h4>公司荣誉（HONOR）</h4>
          <p>{{indexHonor.desc}}</p>
          <div class="more" @click="$router.push('/company-honor')">
            <img src="../assets/right.png" alt>
          </div>
        </div>
        <div class="item">
          <img :src="indexHonorPic" alt>
        </div>
        <div class="item">
          <h4>研发体系（SYSTEM）</h4>
          <p>{{indexDevelopment.desc}}</p>
          <div class="more" @click="$router.push('/company-system')">
            <img src="../assets/right.png" alt>
          </div>
        </div>
        <div class="item">
          <img :src="indexDevelopmentPic" alt>
        </div>
        <div class="item">
          <h4>企业文化（CULTURE）</h4>
          <p>{{indexCulture.desc}}</p>
          <div class="more" @click="$router.push('/company-culture')">
            <img src="../assets/right2.png" alt>
          </div>
        </div>
        <div class="item">
          <img :src="indexCulturePic" alt>
        </div>
      </div>
    </div>
    <div class="contact">
      <div class="contact-box">
        <div class="bg-title">如需咨询服务和加盟服务，请联系我们</div>
        <div
          class="sub-title"
        >For inquiries and franchise services,please contact us.We look forward to your letter.</div>
      </div>
    </div>
  </div>
</template>

<script>
import getData from "../api/getInfo";

export default {
  name: "HelloWorld",
  data() {
    return {
      bannerLists: [],
      recommend: [],
      indexCasesTop: [],
      indexCasesBottom: [],
      casesLists: [],
      indexAbout: "",
      indexAboutPic: "",
      indexHonor: "",
      indexHonorPic: "",
      indexCulture: "",
      indexCulturePic: "",
      indexDevelopment: "",
      indexDevelopmentPic: ""
    };
  },
  mounted() {
    // let mySwiper = new Swiper(".swiper1", {
    //   // autoplay: {
    //   //   delay: 3000,
    //   //   disableOnInteraction: false
    //   // },
    //   autoplay: true,
    //   loop: true,
    //   pagination: {
    //     el: ".swiper-pagination",
    //     clickable: true
    //   },
    //   observer: true
    // });
    this.getBanner();
    this.getRecommend();
    this.getIndexCases();
    this.getIndexKnowledge();
    this.getIndex();
  },
  methods: {
    initSwiper() {
      let mySwiper = new Swiper(".swiper1", {
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        // autoplay: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          bulletActiveClass: "my-bullet-active"
        },
        observer: true
      });
    },
    mouseover(e) {
      let items = this.$refs.mouseEvent.querySelectorAll(".item");
      for (var i = 0; i < items.length; i++) {
        // 进入
        items[i].addEventListener("mouseover", function() {
          this.style.boxShadow = "0px 8px 38px 0px rgba(94, 114, 169, 0.3)";
          this.style.marginTop = "-20px";
          this.querySelector(".btn").style.color = "#fff";
          this.querySelector(".btn").style.backgroundColor = "#666";
        });
        // 离开
        items[i].addEventListener("mouseout", function() {
          this.style.boxShadow = "none";
          // this.querySelector('.caption').style.textShadow = 'none'
          this.querySelector(".btn").style.color = "#356f46";
          this.querySelector(".btn").style.backgroundColor = "#fff";
          this.style.marginTop = "0";
        });
      }
    },
    //获取banner图
    getBanner() {
      getData
        .getBanner()
        .then(res => {
          let tempArr = [];
          res.data.forEach((val, index) => {
            if (val.type == 0) {
              val.banner_pic = `${getData.url}${val.banner_pic}`;
              tempArr.push(val);
            }
          });
          this.bannerLists = tempArr;
          this.$nextTick(() => {
            // 下一个UI帧再初始化swiper
            this.initSwiper();
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
    //获取产品推荐
    getRecommend() {
      getData
        .getRecommend()
        .then(res => {
          let tempArr = [];
          res.data.forEach((val, index) => {
            val.product_pic = `${getData.url}${val.product_pic}`;
            tempArr.push(val);
          });
          this.recommend = tempArr;
        })
        .catch(e => {
          console.log(e);
        });
    },
    //首页案例展示
    getIndexCases() {
      getData
        .getIndexCases()
        .then(res => {
          let tempArr1 = [];
          let tempArr2 = [];
          tempArr1.push(res.data.slice(0, 2));
          this.indexCasesTop = tempArr1;
          tempArr2.push(res.data.slice(2, 5));
          this.indexCasesBottom = tempArr2;
        })
        .catch(e => {
          console.log(e);
        });
    },
    //首页知识展示
    getIndexKnowledge() {
      getData
        .getIndexKnowledge()
        .then(res => {
          let length = res.data.length;
          let result1 = [];
          let result2 = [];
          let result3 = [];
          let allResult = [];
          if (length % 3 == 0) {
            result1.push(res.data.slice(0, length / 3));
            result2.push(res.data.slice(length / 3, length / 3 + length / 3));
            result3.push(res.data.slice(length / 3 + length / 3, length));
          } else if (length % 3 == 1) {
            result1.push(res.data.slice(0, Math.ceil(length / 3)));
            result2.push(
              res.data.slice(
                Math.ceil(length / 3),
                Math.ceil(length / 3) + Math.floor(length / 3)
              )
            );
            result3.push(
              res.data.slice(
                Math.ceil(length / 3) + Math.floor(length / 3),
                length
              )
            );
          } else {
            result1.push(res.data.slice(0, Math.ceil(length / 3)));
            result2.push(
              res.data.slice(
                Math.ceil(length / 3),
                Math.ceil(length / 3) + Math.ceil(length / 3)
              )
            );
            result3.push(
              res.data.slice(
                Math.ceil(length / 3) + Math.ceil(length / 3),
                length
              )
            );
          }
          allResult.push(result1, result2, result3);
          this.casesLists = allResult;
        })
        .catch(e => {
          console.log(e);
        });
    },
    //跳转产品详情
    goDetails(pro_id) {
      this.$router.push({
        path: `/productDetails/${pro_id}`
      });
    },
    //跳转案例详情
    goCaseDetails(case_id) {
      this.$router.push({
        path: `/caseDetails/${case_id}`
      });
    },
    //跳转知识详情
    goKnowledgeDetails(knowledge_id) {
      this.$router.push({
        path: `/knowledgeDetails/${knowledge_id}`
      });
    },
    //跳转知识页面
    goKnowledge() {
      this.$router.push({
        path: "/knowledge"
      });
    },
    getIndex() {
      getData
        .getIndex()
        .then(res => {
          this.indexAbout = res.data.about;
          this.indexAboutPic =
            "https://cdn1-open.mokyun.com/" + res.data.about.pic;
          this.indexHonor = res.data.honor;
          this.indexHonorPic =
            "https://cdn1-open.mokyun.com/" + res.data.honor.pic;
          this.indexCulture = res.data.culture;
          this.indexCulturePic =
            "https://cdn1-open.mokyun.com/" + res.data.culture.pic;
          this.indexDevelopment = res.data.development;
          this.indexDevelopmentPic =
            "https://cdn1-open.mokyun.com/" + res.data.development.pic;
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.swiper-container {
  height: 505px;
  width: 100%;
}
.show {
  width: 100%;
  height: 183px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  p {
    font-size: 40px;
    font-weight: bold;
    color: #96ce54;
    position: relative;
    margin: 0;
    padding: 0;
    text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
  }
  p::before {
    content: "";
    position: absolute;
    width: 227px;
    height: 2px;
    background: #bddd22;
    left: -250px;
    top: 50%;
    box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
  }
  p::after {
    content: "";
    position: absolute;
    width: 227px;
    height: 2px;
    background: #bddd22;
    right: -250px;
    top: 50%;
    box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
  }
  span {
    font-size: 22px;
    color: #96ce54;
    margin-top: 20px;
  }
}
.products {
  width: 100%;
  height: 945px;
  background: url("../assets/background.png") no-repeat;
  .products-box {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .item {
      width: 294px;
      height: 416px;
      background: #fff;
      margin-right: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.5s ease-in-out;
      cursor: pointer;
      .img {
        width: 100%;
        height: 254px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        span {
          position: absolute;
          width: 34px;
          height: 64px;
          left: 0;
          top: 50%;
          background: #53ab48;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          transform: translateY(-32px);
        }
      }
      .title {
        font-size: 26px;
        color: #323232;
        margin-top: 30px;
      }
      .btn {
        width: 100px;
        height: 36px;
        margin-top: 30px;
        border: 1px solid #666666;
        border-radius: 4px;
        color: #356f46;
        font-size: 18px;
        line-height: 36px;
        text-align: center;
      }
    }
    .item:nth-child(4n) {
      margin-right: 0;
    }
  }
}
.process {
  width: 100%;
  height: 356px;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  p {
    font-size: 28px;
    color: #53ab48;
    position: relative;
    margin: 0;
    padding: 0;
  }
  p::before {
    content: "";
    position: absolute;
    width: 142px;
    height: 1px;
    background: #aca2a2;
    left: -180px;
    top: 50%;
  }
  p::after {
    content: "";
    position: absolute;
    width: 142px;
    height: 1px;
    background: #aca2a2;
    right: -180px;
    top: 50%;
  }
  .img-all {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    // margin-top: 40px;
    img {
      width: 227px;
      height: 227px;
    }
  }
}
.cases {
  width: 100%;
  height: 945px;
  background: url("../assets/background.png") no-repeat;
  .cases-box {
    margin: 0 auto;
    width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    .cases-top {
      height: 350px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .top-left {
        width: 580px;
        height: 350px;
        position: relative;
        .up {
          width: 530px;
          height: 290px;
          background: palevioletred;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 20;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .end {
          width: 530px;
          height: 300px;
          background: #fff;
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 10;
          box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.12);
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          span {
            margin-bottom: 18px;
            font-size: 20px;
            color: #323232;
          }
          span:first-child {
            margin-left: 48px;
          }
          span:last-child {
            margin-right: 60px;
            position: relative;
            cursor: pointer;
          }
          span:last-child::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 12px;
            background: #bef37e;
            bottom: 0;
            left: 0;
            z-index: -1;
          }
        }
      }
      .top-right {
        width: 580px;
        height: 350px;
        position: relative;
        .up {
          width: 530px;
          height: 290px;
          background: palevioletred;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 20;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .end {
          width: 530px;
          height: 300px;
          background: #fff;
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 10;
          box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.12);
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          span {
            margin-bottom: 18px;
            font-size: 20px;
            color: #323232;
          }
          span:first-child {
            margin-left: 48px;
          }
          span:last-child {
            margin-right: 60px;
            position: relative;
            cursor: pointer;
          }
          span:last-child::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 12px;
            background: #bef37e;
            bottom: 0;
            left: 0;
            z-index: -1;
          }
        }
      }
    }
    .cases-bottom {
      height: 380px;
      width: 1100px;
      display: flex;
      justify-content: space-between;
      .item {
        width: 350px;
        height: 100%;
        background: #fff;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.12);
        .img {
          width: 350px;
          height: 310px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          height: 70px;
          display: flex;
          justify-content: space-between;
          line-height: 70px;
          position: relative;
          z-index: 10;
          span {
            margin-bottom: 18px;
            font-size: 20px;
            color: #323232;
          }
          span:first-child {
            margin-left: 38px;
          }
          span:last-child {
            margin-right: 47px;
            position: relative;
            cursor: pointer;
            font-size: 16px;
          }
          span:last-child::after {
            content: "";
            position: absolute;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: #bef37e;
            top: 50%;
            transform: translateY(-10px);
            left: -10px;
            z-index: -1;
          }
        }
      }
    }
  }
}
.level {
  width: 100%;
  height: 884px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 1209px;
    height: 665px;
  }
}
.figure {
  width: 100%;
  height: 729px;
  img {
    width: 100%;
    height: 100%;
  }
}
.knowledge {
  width: 100%;
  height: 945px;
  background: url("../assets/shazhi.png") no-repeat;
  .title {
    width: 100%;
    height: 183px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    p {
      font-size: 40px;
      font-weight: bold;
      color: #96ce54;
      position: relative;
      margin: 0;
      padding: 0;
      text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2);
    }
    p::before {
      content: "";
      position: absolute;
      width: 227px;
      height: 2px;
      background: #bddd22;
      left: -250px;
      top: 50%;
      box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
    }
    p::after {
      content: "";
      position: absolute;
      width: 227px;
      height: 2px;
      background: #bddd22;
      right: -250px;
      top: 50%;
      box-shadow: 2px 1px 1px rgba(0, 0, 0, 0.2);
    }
    span {
      font-size: 22px;
      color: #96ce54;
      margin-top: 20px;
    }
  }
  .knowledge-box {
    width: 1372px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .item {
      width: 420px;
      height: 590px;
      background: url("../assets/lightbulb.png") no-repeat #fff center center;
      background-size: 336px 448px;
      border-top: 10px solid #96ce54;
      position: relative;
      .bg-title {
        height: 115px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25px;
        box-sizing: border-box;
        h3 {
          font-size: 32px;
          color: #0e6441;
          line-height: 115px;
        }
        span {
          font-size: 100px;
          font-weight: bold;
          color: #e6e5e5;
        }
      }
      .content {
        // width: 380px;
        padding: 0 25px;
        margin: 0 auto;
        max-height: 290px;
        overflow: hidden;
        li {
          height: 42px;
          font-size: 24px;
          width: 100%;
          a {
            display: block;
            width: 100%;
            color: #666;
            line-height: 42px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-decoration: none;
          }
          a:hover {
            color: #96ce54;
          }
        }
      }
      .more {
        width: 68px;
        height: 68px;
        position: absolute;
        right: 20px;
        bottom: 50px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.about {
  width: 100%;
  height: 840px;
  background: url("../assets/s6.png") #fff no-repeat;
  .about-box {
    width: 1200px;
    height: 100%;
    padding-top: 64px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    .item {
      width: 358px;
      height: 258px;
      box-sizing: border-box;
      position: relative;
      .more {
        width: 37px;
        height: 18px;
        position: absolute;
        bottom: 25px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .item:nth-child(2),
    .item:nth-child(5),
    .item:nth-child(8) {
      width: 484px;
      height: 258px;
    }
    .item:nth-child(1) {
      padding-top: 10px;
      padding-left: 30px;
      h3 {
        font-size: 62px;
        color: #fff;
      }
      h4 {
        font-size: 32px;
        color: #fff;
      }
    }
    .item:nth-child(2) {
      padding: 30px 80px 0px 30px;
      color: #fff;
      h4 {
        font-size: 24px;
      }
      p {
        font-size: 18px;
      }
      // .more {
      //   width: 37px;
      //   height: 18px;
      //   img {
      //     width: 100%;
      //     height: 100%;
      //   }
      // }
    }
    .item:nth-child(3) {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item:nth-child(4) {
      padding: 30px 80px 0px 30px;
      color: #fff;
      h4 {
        font-size: 24px;
      }
      p {
        font-size: 18px;
      }
      // .more {
      //   width: 37px;
      //   height: 18px;
      //   img {
      //     width: 100%;
      //     height: 100%;
      //   }
      // }
    }
    .item:nth-child(5) {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item:nth-child(6) {
      background: #53ab48;
      padding: 30px 80px 0px 30px;
      color: #fff;
      h4 {
        font-size: 24px;
      }
      p {
        font-size: 18px;
      }
      // .more {
      //   width: 37px;
      //   height: 18px;
      //   img {
      //     width: 100%;
      //     height: 100%;
      //   }
      // }
    }
    .item:nth-child(7),
    .item:nth-child(9) {
      img {
        width: 100%;
        height: 100%;
      }
    }
    .item:nth-child(8) {
      background: #fff;
      padding: 30px 80px 0px 30px;
      h4 {
        font-size: 24px;
        color: #555;
      }
      p {
        font-size: 18px;
        color: #949596;
      }
      // .more {
      //   width: 37px;
      //   height: 18px;
      //   img {
      //     width: 100%;
      //     height: 100%;
      //   }
      // }
    }
  }
}
.contact {
  width: 100%;
  height: 626px;
  background: url("../assets/s11.png") no-repeat;
  background-size: 100% 626px;
  box-sizing: border-box;
  padding-top: 138px;
  padding-left: 138px;
  .contact-box {
    width: 886px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .bg-title {
      font-size: 38px;
      color: #30313a;
      border: solid 2px #30313a;
      width: 886px;
      height: 86px;
      line-height: 86px;
      text-align: center;
    }
    .sub-title {
      width: 500px;
      text-align: center;
      margin-top: 26px;
      font-size: 20px;
      color: #323232;
    }
  }
}
</style>



